<template>
	<view class="box">
		<van-tabs class="tabs" active="{{ status }}" @change="tabClick">
			<van-tab v-for="i in tabList" :key="i.id" :name="i.id" :title="i.tabName"></van-tab>
		</van-tabs>
		<view class="boxMain">
			<scroll-view scroll-y enable-flex
				style="width: 100%;height: calc(100vh-50px);box-sizing: border-box;overflow:auto;">
				<view v-if="list.length>0" class="main">
					<view class="main-row cardBorder" v-for="(j,jIndex) in list" :key="jIndex" @click="rowClick(j)">
						<view class="main-row-col">
							<text class="main-row-col-label">订单编号：</text>
							<text>{{j.orderNo}}</text>
						</view>
						<view class="main-row-col">
							<text class="main-row-col-label">产品名称：</text>
							<text>{{j.productName}}</text>
						</view>
						<view class="main-row-col">
							<text class="main-row-col-label">规格*米数：</text>
							<text>{{j.specification}}</text>
						</view>
						<view class="main-row-col">
							<text class="main-row-col-label">总吨数：</text>
							<text>{{j.totalTon}}</text>
						</view>
						<view class="main-row-col">
							<text class="main-row-col-label">托盘费用：</text>
							<text>{{j.trayAmount}}</text>
						</view>
						<view class="main-row-col amount">
							<text class="main-row-col-label">总金额：</text>
							<text>{{j.amount}}</text>
						</view>
						<view class="main-row-col" style="flex-basis: 100%;">
							<text class="main-row-col-label">创建时间：</text>
							<text>{{j.createTime}}</text>
						</view>
						<view class="orderStatus">
							<text class="orderStatus-text">{{j.statusName}}</text>
							<van-icon name="arrow" color="#fff" />
						</view>
					</view>
					<view v-if="loading" class="loading">加载中...</view>
					<view v-if="page.pageIndex>=totalPages-1" class="loading">没有更多数据了</view>
				</view>
				<view v-else-if="!loading&&list.length==0" class="empty">
					<van-empty description="暂无数据" />
				</view>
			</scroll-view>
		</view>
	</view>
	<float-drag></float-drag>
</template>

<script>
	import {
		getOrderDetail
	} from '@/common/api.js'
	import toolMarket from './util.js'
	import FloatDrag from '../../components/float-drag.vue'
	export default {
		name: 'mineOrder',
		components: {
			'float-drag': FloatDrag
		},
		data() {
			return {
				status: 0,
				list: [],
				page: {
					pageIndex: 0,
					pageSize: 20
				},
				totalPages: 0,
				loading: false,
				tabList: [{
						id: 0,
						tabName: "所有订单"
					},
					{
						id: 1,
						tabName: "已下单"
					},
					{
						id: 2,
						tabName: "待付款"
					},
					{
						id: 3,
						tabName: "已付款"
					},
					{
						id: 4,
						tabName: "配送中"
					}, {
						id: 5,
						tabName: "已完成"
					},
					{
						id: 6,
						tabName: "已取消"
					},
				],
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page.pageIndex = 0
			this.list = []
			this.status = 0
			this.getList()
			setTimeout(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async getList() {
				this.loading = true
				let params = {
					pageIndex: this.page.pageIndex,
					pageSize: this.page.pageSize
				}
				if (this.status > 0) {
					params.status = this.status
				}
				const res = await getOrderDetail(params)
				if (res.data) {
					this.list.push(...res.data)
				}
				this.totalPages = res.totalPages
				this.loading = false
				console.log(this.list)
			},
			onScrollToLower(event) {
				if (event.detail.direction === 'bottom' && this.list.length > 0 && !this.loading) {
					if (this.page.pageIndex >= this.totalPages - 1) return
					this.page.pageIndex++
					this.getList()
				}
			},
			tabClick(val) {
				this.status = val.detail.name
				this.list = []
				this.page.pageIndex = 0
				this.getList()
			},
			rowClick(row) {
				console.log(row)
				uni.navigateTo({
					url: `../market/confirmOrder?orderId=${row.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;
		background-color: #ececec;
		box-sizing: border-box;
		position: relative;

		.boxMain {
			width: 100%;
			height: calc(100vh - 50px);
			padding: 0px 10px 20px;
			overflow-y: auto;
			box-sizing: border-box;
		}

		.tabs {
			:deep(.van-tab) {
				min-width: 70px;
				font-size: 15px;
			}
			:deep(.van-tabs__line) {
				background-color: #0749e4 !important;
			}
		}

		.main {
			font-size: 15px;
			// padding-top: 45px;

			&-row {
				padding: 25px 12px 10px;
				display: flex;
				flex-wrap: wrap;
				align-content: center;
				position: relative;

				&-col {
					flex: 50%;
					height: 40px;
					line-height: 40px;
					font-size: 14px;

					&-label {
						color: #969798;
					}
				}

				.amount {
					background-color: yellow;
					font-size: 16px;
				}

				.orderStatus {
					position: absolute;
					top: 0;
					right: 0;
					height: 25px;
					line-height: 25px;
					padding: 0 12px;
					font-size: 13px;
					color: #fff;
					background-color: #0749e4;
					border-radius: 0 10px 0 10px;

					&-text {
						margin-right: 5px;
					}
				}
			}

			.loading {
				height: 45px;
				line-height: 45px;
				width: 100%;
				text-align: center;
				color: #a8a8a8;
			}
		}

		.empty {
			padding-top: 45px;
			box-sizing: border-box;
			height: calc(100vh - 145px);
			text-align: center;
			color: #a8a8a8;
			font-size: 15px;
		}

		.cardBorder {
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 30rpx;
			background-color: #fff;
		}
	}
</style>